<template>
	<view>
		<u-navbar :title="`群成员(${gather.menberList.length})`"></u-navbar>
		<view class="search">
			<u-search placeholder="搜索" :show-action="false" @search="onSearch" v-model="gather.searchValue"></u-search>
		</view>
		<view class="users">
			<view class="flex">
				<view v-for="item in gather.menberList" :key="item.id"
					class="users-list flex flex-dir-c flex-ai-c">
					<view class="head-img img" @click="userDetailed(item.userid)">
						<image :src="item.handimg"></image>
					</view>
					<view>{{item.name || item.username}}</view>
				</view>
				<view class="users-list flex flex-jc-c">
					<view class="icon flex flex-ai-c flex-jc-c">
						<u-icon name="plus" size="40" color="rgb(130,130,130)"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import chat from '@/api/chat.js'
	import {
		reactive,
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	let gather = reactive({
		menberList: [],
		searchValue: '',
		id: null,
		leaderid: null
	})
	const onSearch = () => {
		getMenber(gather.id, gather.leaderid)
	}
	const userDetailed = (id: string|number) => {
		uni.navigateTo({
			url: `/pages_home/personalInfo/index?id=${id}`
		})
	}
	//获取群成员
	const getMenber = async (id : String | Number,leaderid: String | Number) => {
		const res = await chat.crowdMenberList({
			id: id,
			searchValue: gather.searchValue,
			leaderid: leaderid,
		})
		gather.menberList = res.data
	}
	onLoad((op) => {
		gather.id = op.id
		gather.leaderid = op.leaderid
		getMenber(op.id,op.leaderid)
	})
</script>

<style lang="scss" scoped>
	.search{
		padding: 20rpx;
	}
	.users {
		padding: 20rpx;
		background-color: #fff;
		//头像
		font-size: 18rpx;
	
		.head-img {
			width: 80rpx;
			height: 80rpx;
	
			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
				border: 1px solid rgb(200, 200, 200);
			}
		}
	
		&-list {
			width: 20%;
	
			.icon {
				border: 1px dashed rgb(130, 130, 130);
				height: 80rpx;
				width: 80rpx;
			}
		}
	}
</style>